<template lang='pug'>
  //- @on-visible-change="selectUserModalChange"
  Modal(v-model="show" title="选择收件人" width="800" :closable="false" :mask-closable="false")
    .ivu-transfer
      .ivu-transfer-list.ivu-transfer-list-with-footer.w320(:class="{'pb-0': currentTab === 0}")
        .ivu-transfer-list-header.transfer-left-header
          span(:class="currentTab === 0 ? 'active': ''" @click="chooseTab(0)") 平台账号
          span(:class="currentTab === 1 ? 'active': ''" @click="chooseTab(1)") 客户账号
          span(:class="currentTab === 2 ? 'active': ''" @click="chooseTab(2)") 员工账号
        .ivu-transfer-list-body.ivu-transfer-list-body-with-footer(:class="currentTab === 0? 'overflow-y-scroll': 'overflow-visible'")
          Input.input-has-border.mb-10(v-if="currentTab !== 0" v-model="name" suffix="ios-search" search placeholder="请输入..." style="width: 100%" @on-search="searchUser")
          .container(:class="{'h260': currentTab !== 0}")
            div(v-show="currentTab === 0")
              Tree(:data="treeData" show-checkbox @on-check-change="onCheckChange")
            div(v-show="currentTab === 1")
              CheckboxGroup(v-model="arr_1" @on-change="arr_1_change")
                .mb-10(v-for="item in clientAccount")
                  Checkbox(:label="item.id" :key="item.id") {{item.name}}
            div(v-show="currentTab === 2")
              CheckboxGroup(v-model="arr_2" @on-change="arr_2_change")
                .mb-10(v-for="item in userAccount")
                  Checkbox(:label="item.id" :key="item.id") {{item.name}}
        .ivu-transfer-list-footer(:class="{'hsa-t-b': currentTab !== 0}")
          template(v-if="currentTab === 1")
            div(:style="{float: 'left', margin: '5px'}")
              Checkbox(
                :value="checkAll_1"
                @click.prevent.native="handleCheckAll_1") 全选
            div(:style="{float: 'right', margin: '5px'}")
              Page(:current="pageIndex_1" :page-size="30" :total="totalRows_1" simple @on-change="pageChange_1")
          template(v-if="currentTab === 2")
            div(:style="{float: 'left', margin: '5px'}")
              Checkbox(
                :value="checkAll_2"
                @click.prevent.native="handleCheckAll_2") 全选
            div(:style="{float: 'right', margin: '5px'}")
              Page(:current="pageIndex_2" :page-size="30" :total="totalRows_2" simple @on-change="pageChange_2")
      .ivu-transfer-operation
        //- Button(size="small" shape="circle" @click="backBtn")
        //-   Icon(type="ios-arrow-back")
        Button(size="small" shape="circle" @click="forwardBtn")
          Icon(type="ios-arrow-forward")
      .ivu-transfer-list.ivu-transfer-list-with-footer.w320.pb-0
        .ivu-transfer-list-header.transfer-right-header
          span 收件人（{{inboxTotal}}）
          span.qk(@click="cleanUp") 清空
        .ivu-transfer-list-body.ivu-transfer-list-body-with-footer.overflow-y-scroll
          CheckboxGroup
            .mb-10.c-0dc2ff(v-if="arr_0_inbox.length > 0") 平台账号：
            .mb-10(v-for="item in arr_0_inbox")
              span.name.text-decoration(:key="item.id" @click="delPt(item.id)") {{item.name}}
            .mb-10.c-0dc2ff(v-if="arr_1_inbox.length > 0") 客户账号：
            .mb-10(v-for="item in arr_1_inbox")
              span.name.text-decoration(:key="item.id" @click="delClient(item.id)") {{item.name}}
            .mb-10.c-0dc2ff(v-if="arr_2_inbox.length > 0") 员工账号：
            .mb-10(v-for="item in arr_2_inbox")
              span.name.text-decoration(:key="item.id" @click="delUser(item.id)") {{item.name}}
        .ivu-transfer-list-footer
    template(slot="footer")
      Button(type="info" @click="confirmBtn()") 确定
      Button(@click="cancel()") 取消


</template>

<script>
import MailApi from "../../service.js";
export default {
  name: "select-user",
  props: {},
  data() {
    return {
      name: '',
      show: false,
      currentTab: 0,
      pageIndex_1: 1, // 客户页码
      pageIndex_2: 1, // 员工页码
      checkAll_1: false, // 客户账号全选值
      checkAll_2: false, // 员工账号全选值
      type: null, // Type = 1 （客户） 2----员工
      totalRows_1: 0, // 客户总数
      totalRows_2: 0, // 员工总数
      arr_0: [], // 平台选中数组
      arr_0_inbox: [], //平台收件人
      arr_0_inbox_init: [],
      arr_1: [], // 客户选中数组
      arr_1_inbox: [], // 客户收件人
      arr_1_inbox_init: [],
      arr_2: [], // 员工选中数组
      arr_2_inbox: [], // 员工收件人
      arr_2_inbox_init: [],
      treeData: [], // 平台账号
      clientAccount: [], // 客户端账号
      userAccount: [], // 员工账号
    };
  },

  components: {},

  computed: {
    setName () {
      return (val) => {
        let arr = val.split(',')
        return arr[1]
      }
    },
    setId () {
      return (val) => {
        let arr = val.split(',')
        return arr[0]
      }
    },
    inboxTotal () {
      return this.arr_0_inbox.length + this.arr_1_inbox.length + this.arr_2_inbox.length 
    }
  },

  beforeMount() {},

  mounted() {
    this.GetVisibleTreeList()
  },

  methods: {
    selectUserModalChange (val) {
      if (!val) {
        this.$emit('on-confrim', [...this.arr_0_inbox, ...this.arr_1_inbox, ...this.arr_2_inbox])
      }
    },
    showFn() {
      this.show = true;
    },
    chooseTab (index) {
      if (this.currentTab === index) {
        return false
      } else {
        // this.pageIndex_1 = 1
        // this.pageIndex_2 = 1
        this.currentTab = index
        switch (index) {
          case 0:
            this.type = 0
            // this.GetUserList_1()
            break;
          case 1:
            this.type = 1
            this.GetUserList_1()
            break;
          case 2:
            this.type = 2
            this.GetUserList_2()
            break;
          default:
            break;
        }
      }
    },
    // 获取平台账号
    GetVisibleTreeList () {
      MailApi.GetVisibleTreeList().then(res => {
        console.log(res)
        this.treeData = res.data.data
      })
    },
    // 获取客户账号  PowerType = 1 （客户） 2----员工
    GetUserList_1 () {
      MailApi.GetMailUserList({
        Name: this.name,
        PageIndex: this.pageIndex_1,
        PageSize: 30,
        PowerType: this.type,
        Enabled: true
      }).then(res => {
        this.totalRows_1 = res.data.totalRows
        this.clientAccount = res.data.data
      })
    },
    GetUserList_2 () {
      MailApi.GetMailUserList({
        Name: this.name,
        PageIndex: this.pageIndex_2,
        PageSize: 30,
        PowerType: this.type,
        Enabled: true
      }).then(res => {
        this.totalRows_2 = res.data.totalRows
        this.userAccount = res.data.data
      })
    },
    // 搜索账号
    searchUser () {
      this.pageIndex_1 = 1
      this.pageIndex_2 = 1
      switch (this.type) {
        case 1:
          this.GetUserList_1()
          break;
        case 2:
          this.GetUserList_2()
          break;
        default:
          break;
      }
    },
    // 删除平台
    delPt (id) {
      this.arr_0_inbox.splice(this.arr_0_inbox.findIndex(item => item.id === id), 1)
    },
    // 删除客户
    delClient (id) {
      this.arr_1_inbox.splice(this.arr_1_inbox.findIndex(item => item.id === id), 1)
    },
    // 删除员工
    delUser (id) {
      this.arr_2_inbox.splice(this.arr_2_inbox.findIndex(item => item.id === id), 1)
    },
    // 平台账号选择改变时
    onCheckChange (val) {
      console.log(val)
      let arr = []
      val.forEach(item => {
        if (item.type === "4") {
          // arr.push(item.id + ',' + item.title)
          arr.push({
            id: item.id,
            name: item.title,
            powerType: 'Supplier'
          })
        }
      })
      this.arr_0 = arr
      console.log(this.arr_0)
    },
    pageChange_1 (val) {
      this.pageIndex_1 = val
      this.checkAll_1 = false
      this.GetUserList_1()
    },
    pageChange_2 (val) {
      this.pageIndex_2 = val
      this.checkAll_2 = false
      this.GetUserList_2()
    },
    handleCheckAll_1 () {
      this.checkAll_1 = !this.checkAll_1
      if (this.checkAll_1) {
        this.arr_1 = this.clientAccount.map(item => {
          // return {
          //   id: item.id,
          //   name: item.name,
          //   powerType: item.powerType
          // }
          return item.id
        })
      } else {
        this.arr_1 = []
      }
    },
    arr_1_change (val) {
      console.log(val)
      if (val && val.length === this.clientAccount.length) this.checkAll_1 = true
      else this.checkAll_1 = false
    },
    handleCheckAll_2 () {
      this.checkAll_2 = !this.checkAll_2
      if (this.checkAll_2) {
        this.arr_2 = this.userAccount.map(item => {
          return item.id
        })
      } else {
        this.arr_2 = []
      }
    },
    arr_2_change (val) {
      if (val && val.length === this.userAccount.length) this.checkAll_2 = true
      else this.checkAll_2 = false
    },
    // backBtn () {},
    forwardBtn () {
      switch (this.currentTab) {
        case 0:
          this.arr_0.forEach(item => {
            let isHas = this.arr_0_inbox.some(_ => {
              return _.id === item.id
            })
            if (isHas) {
              return false
            } else {
              this.arr_0_inbox.push(item)
            }
          })
          this.arr_0 = []
          this.GetVisibleTreeList()
          break;
        case 1:
          console.log(this.arr_1)
          this.arr_1.forEach(item => {
            let isHas = this.arr_1_inbox.some(_ => {
              return _.id === item
            })
            if (isHas) {
              return false
            } else {
              this.clientAccount.forEach(i => {
                if (i.id === item) {
                  this.arr_1_inbox.push({
                    id: i.id,
                    name: i.name,
                    powerType: i.powerType
                  })
                }
              })
            }
          })
          this.arr_1 = []
          this.checkAll_1 = false
          break;
        case 2:
          this.arr_2.forEach(item => {
            let isHas = this.arr_2_inbox.some(_ => {
              return _.id === item
            })
            if (isHas) {
              return false
            } else {
              this.userAccount.forEach(i => {
                if (i.id === item) {
                  this.arr_2_inbox.push({
                    id: i.id,
                    name: i.name,
                    powerType: i.powerType
                  })
                }
              })
            }
          })
          this.arr_2 = []
          this.checkAll_2 = false
          break;
      }
    },
    cleanUp () {
      this.arr_0_inbox = []
      this.arr_1_inbox = []
      this.arr_2_inbox = []
    },
    // 确定
    confirmBtn () {
      this.$emit('on-confrim', [...this.arr_0_inbox, ...this.arr_1_inbox, ...this.arr_2_inbox])
      this.show = false
    },
    // 取消
    cancel() {
      this.show = false
      console.log('this.arr_0_inbox_init: ', this.arr_0_inbox_init)
      // this.arr_0_inbox = this.arr_0_inbox_init
      // this.arr_1_inbox = this.arr_1_inbox_init
      // this.arr_2_inbox = this.arr_2_inbox_init
      // this.$emit('on-confrim', [...this.arr_0_inbox_init, ...this.arr_1_inbox_init, ...this.arr_2_inbox_init])
    },
    closeInboxUser (id) {
      console.log(id)
      let isHas_0 = this.arr_0_inbox.some(_ => {
        return _.id === id
      })
      let isHas_1 = this.arr_1_inbox.some(_ => {
        return _.id === id
      })
      let isHas_2 = this.arr_2_inbox.some(_ => {
        return _.id === id
      })
      if (isHas_0) {
        this.arr_0_inbox.splice(this.arr_0_inbox.findIndex(item => item.id === id), 1)
      }
      if (isHas_1) {
        this.arr_1_inbox.splice(this.arr_1_inbox.findIndex(item => item.id === id), 1)
      }
      if (isHas_2) {
        this.arr_2_inbox.splice(this.arr_2_inbox.findIndex(item => item.id === id), 1)
      }
    },
    addInboxUser (obj) {
      console.log(obj)
      switch (obj.powerType) {
        case 'Supplier':
          this.arr_0_inbox.push(obj)
          break;
        case 'CustomerManage':
          this.arr_1_inbox.push(obj)
          break;
        case 'CustomerEmployee':
          this.arr_2_inbox.push(obj)
          break;
        default:
          break;
      }
    }
  },

  watch: {
    // arr_2 (val) {
    //   console.log(val)
    //   this.
    // }
  }
};
</script>
<style lang='less' scoped>
.ivu-transfer-list{
  height: 400px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.ivu-transfer-list-header {
  padding: 0;
  border-bottom: none;
  background: #f2f2f2;
}
.ivu-transfer-list-footer{
  &.hsa-t-b{
    border-top: 1px solid #dcdee2;
  }
  height: 40px;
  padding-top: 2px;
}
.transfer-left-header {
  display: flex;
  span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    flex: 1;
    text-align: center;
    cursor: pointer;
    &.active {
      background-color: #fff;
      color: #0dc2ff;
    }
  }
}
.transfer-right-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  span{
    display: inline-block;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .qk{
    color: #0dc2ff;
    cursor: pointer;
  }
}
.ivu-transfer-list-body{
  padding: 15px;
  border-bottom: none;
  .container{
    overflow: auto;
  }
}
.c-0dc2ff{
  color: #0dc2ff;
}
.text-decoration{
  &:hover{
    text-decoration: line-through;
    cursor: pointer;
  }
}
</style>